<template>
  <div class="recommends" ref="scrollbox">
    <div class="recoment-textarea" v-if="showTextarea">
      <el-input
        type="textarea"
        :rows="3"
        resize="none"
        v-model="recommontContent"
      ></el-input>
      <div class="recoment-action">
        <div class="action-left">emoji</div>
        <div class="action-right">
          <el-button round @click="commitCommon()"> 评论 </el-button>
        </div>
      </div>
    </div>
    <div class="recommends-numbers">
      <h4>最新评论({{ total }})</h4>
    </div>
    <div
      class="recommends-content"
      v-for="(item, index) in recommends"
      :key="index"
    >
      <div class="recommends-content-top">
        <div class="avater">
          <img v-lazy="item.user.avatarUrl" alt="" />
        </div>
        <div class="recommend">
          <div class="recommend-content">
            <div class="recomend-content-top">
              <a href="javascript:" class="recommend-username commentuser"
                >{{ item.user.nickname }}：</a
              >{{ item.content }}
            </div>
            <div
              class="recomend-content-bottom"
              v-if="item.beReplied.length > 0"
            >
              <a href="javascript:" class="commentuser"
                >@{{ item.beReplied[0].user.nickname }}：</a
              >
              {{ item.beReplied[0].content }}
            </div>
          </div>
        </div>
      </div>
      <div class="recommends-content-bottom">
        <div class="recomInfo">
          <p>{{ recomTime(item.time) }}</p>
          <div class="recomInfo-action">
            <i>{{ item.likedCount }}</i>
            <i> zhuanfa </i>
            <i @click="comomnVisible(item)"> pinglun </i>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <div class="music-recommends" v-if="!showTextarea">
      <transition name="comment-btn">
        <el-button
          type="primary"
          icon="el-icon-edit"
          round
          @click="musicCommend"
          v-show="isScrollTop"
          >写评论</el-button
        >
      </transition>
    </div>
    <transition name="comment-btn">
      <el-button circle icon="el-icon-top" v-show="!isScrollTop" class="back-top" @click="goTop"></el-button>
    </transition>
    <div class="music-recommets-center" v-if="!showTextarea">
      <transition name="comment-btn">
        <el-button round icon="el-icon-edit" v-show="!isScrollTop" @click="musicCommend">发表我的音乐评论</el-button>
      </transition>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="30"
      @current-change="paginChange"
    >
    </el-pagination>
    <el-dialog
      width="30%"
      :visible.sync="recomDialogVisible"
      title="评论"
      :append-to-body="true"
    >
      <el-input
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 8 }"
        :placeholder="replyPlacehoder"
        v-model="recommontContent"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="recomDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitCommon">评论</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
import { _pushCommend } from "network/detail";
export default {
  name: "recommends",
  props: {
    recommends: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    id: {
      type: Number,
      default: 0,
    },
    showTextarea: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      recomDialogVisible: false,
      recommentUser: undefined,
      recommontContent: undefined,
      recommontId: undefined,
      scroll: undefined,
      isScrollTop: true,
      targetDocument: undefined
    };
  },
  computed: {
    recomTime() {
      return (time) => {
        return moment(time).format("YYYY-MM-DD hh:mm");
      };
    },
    replyPlacehoder() {
      if (this.recommentUser) {
        return "回复" + this.recommentUser.nickname + ":";
      } else {
        return "发表评论：";
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.distanceToTop, true);
  },
  destroyed() {
    window.removeEventListener('scroll',this.distanceToTop)
  },
  methods: {
    moment,
    comomnVisible(comment) {
      this.recomDialogVisible = true;
      this.recommentUser = comment.user;
      this.recommontId = comment.commentId;
    },
    /** 当前窗口滚动距离顶部的距离 */
    distanceToTop(e) {
      this.scroll = e.target.scrollTop;
      if (this.targetDocument === undefined) {
        this.targetDocument = e.target
      }
      //  || document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll >= 100) {
        // 隐藏右边写评论 显示返回顶部
        this.isScrollTop = false;
      } else {
        // 显示右边写评论 不显示返回顶部
        this.isScrollTop = true;
      }
    },
    goTop(e) {
      // e.path.map((element,index) => {
      //   if (element.className === 'player-pure') {
      //     e.path[index].scrollTop = 0
      //   }
      // })
      this.targetDocument.scrollTop = 0
    },
    /** 评论 歌曲评论 */
    commitCommon() {
      /* 此处要做登陆处理 没有登陆不能评论 */
      let userInfo = this.$store.getters.getUserInfo;
      if (!userInfo) {
        this.$Toast({
          content: "请先登录",
          duration: 1500,
        });
        return false;
      }
      let cookie = userInfo.cookie;
      if (cookie && cookie !== "" && this.id) {
        let obj = undefined;
        if (this.recommontId) {
          obj = _pushCommend(
            cookie,
            2,
            this.id,
            this.recommontContent,
            this.recommontId
          );
        } else {
          obj = _pushCommend(cookie, 1, this.id, this.recommontContent);
        }
        obj.then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.$Toast({
              content: "评论成功",
              duration: 1000,
            });
            this.recommontContent = undefined;
            this.recomDialogVisible = false;
            this.$emit("updateRecom", 1);
          } else {
            this.$Toast({
              content: "评论失败",
              duration: 1000,
            });
          }
        });
      } else {
      }
      // this.recomDialogVisible = false;
    },
    /** 发表歌曲评论 */
    musicCommend() {
      this.recomDialogVisible = true;
      this.recommentUser = undefined;
    },
    paginChange(currentPage) {
      this.$emit("updateRecom", currentPage);
    },
  },
};
</script>
<style scoped lang="less">
.recommends {
  display: block;
  height: 100%;
  // position: absolute;
  &-content {
    padding: 1rem;
    &-top {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: flex-start;
    }
    &-bottom {
      padding-left: 4rem;
      margin-top: 2px;
      font-size: 14px;
    }
  }
}
// .recoment-textarea {

// }
.recoment-action {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.avater {
  display: inline-block;
  height: 3rem;
  width: 3rem;
  img {
    border-radius: 50%;
    height: 100%;
    width: auto;
  }
}
.commentuser {
  flex: auto;
  text-decoration: none;
  color: rgb(81, 163, 240);
}
/** 评论 歌曲评论 */
.recommend {
  display: flex;
  padding-left: 1rem;
  width: 100%;
  &-content {
    flex: auto;
    display: flex;
    flex-direction: column;
  }
}
.recomend-content-bottom {
  width: 100%;
  height: auto;
  padding: 6px 0;
  margin: 4px 0;
  display: block;
  background: rgb(245, 245, 245);
  border-radius: 10px;
}
.recommends-content .recomInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  &-action {
    cursor: pointer;
  }
}
/** 发表歌曲评论 */
.music-recommends {
  position: fixed;
  bottom: 6rem;
  right: 16rem;
}
.music-recommets-center {
  position: fixed;
  bottom: 6rem;
  right: 50%;
}
.back-top {
  position: fixed;
  bottom: 6rem;
  right: 20rem;
}
.comment-btn-enter-active {
  animation: fadeInUp 0.4s;
}
.comment-btn-leave-active {
  animation: fadeOutDown 0.25s;
}
</style>